<template>
	<view>
		<view class="top-box">
			<view class="user-info">
				<image src="/static/icon/left.png" class="left-icon" @click="backToLast"></image>
				<image src="/static/img/avatar.png" class="avatar"></image>
				<view class="user-info-style">
					<view style="font-weight: 600;">Baby Three</view>
					<view>ID 12345678</view>
				</view>
				<image src="/static/icon/wallet.png" class="icon1-style" style="margin-left: 1.88rem;"></image>
				<view class="account-style">0.12 {{$t('cart.account1')}}</view>
				<view class="account-style">16 {{$t('cart.account2')}}</view>
				<image src="/static/icon/setting.png" class="icon2-style"></image>
			</view>

			<view class="nav-container">
				<view class="nav-list">
					<!-- 滑块 -->
					<view class="slider" :style="{ transform: `translateX(${currentIndex * 114}%)` }">
						<!-- 徽标 -->
						<view class="badge-style">3</view>
					</view>
					<!-- tabs页 -->
					<view v-for="(item, index) in navItems" :key="index" class="nav-item"
						:class="{ 'active': currentIndex === index }" @click="handleNavClick(index)">
						<image :src="item.icon" class="nav-icon"></image>
						<text class="nav-text">{{ item.text }}</text>
					</view>
				</view>
			</view>

		</view>

		<!-- 导航菜单 -->
		<view class="content-area">
			<scroll-view scroll-y style="height: 100%;">
				<view v-show="currentIndex === 0" style="padding-bottom: 4rem;box-sizing: border-box;">
					<orderCard></orderCard>
				</view>
				<view v-show="currentIndex === 1">付款码内容</view>
				<view v-show="currentIndex === 2">口令申请内容</view>
				<view v-show="currentIndex === 3">已付包内容</view>
				<view v-show="currentIndex === 4">派送中内容</view>
				<view v-show="currentIndex === 5">新包裹内容</view>
			</scroll-view>
		</view>
		
		<!-- 底部固定栏 -->
		<view class="bottom-box">
			
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	import orderCard from '@/pages/cart/components/orderCard.vue'
	const { t } = useI18n()
	const currentIndex = ref(0)

	const navItems = ref([
		{ icon: '/static/icon/cart1.png', text: t('cart.tabs.item1') },
		{ icon: '/static/icon/cash.png', text: t('cart.tabs.item2') },
		{ icon: '/static/icon/order.png', text: t('cart.tabs.item3') },
		{ icon: '/static/icon/goods.png', text: t('cart.tabs.item4') },
		{ icon: '/static/icon/car.png', text: t('cart.tabs.item5') },
		{ icon: '/static/icon/gift.png', text: t('cart.tabs.item6') }
	])

	const handleNavClick = (index : number) => {
		currentIndex.value = index
	}

	const backToLast = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.top-box {
		width: 100%;
		height: 6.63rem;
		background-image: url('/static/img/myBg.png');
		background-size: cover;
		background-position: top;
		box-sizing: border-box;
		padding-top: 0.5rem;
		font-size: 0.63rem;

		/* #ifdef MP-WEIXIN */
		padding-top: 3rem;
		height: 9.13rem;
		/* #endif */
	}

	.left-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.user-info {
		display: flex;
	}

	.avatar {
		width: 2.44rem;
		height: 2.44rem;
		border-radius: 3.13rem;
		background-color: rgba(229, 229, 229, 1);
		margin-left: 0.5rem;
	}

	.user-info-style {
		width: 4.44rem;
		height: 1.25rem;
		line-height: 1.25rem;
		color: rgba(16, 16, 16, 1);
		text-align: center;
		white-space: nowrap;
		margin-left: 0.3rem;
	}

	.icon1-style {
		width: 1.5rem;
		height: 1.5rem;
		margin-top: 0.3rem;
	}

	.icon2-style {
		width: 1.5rem;
		height: 1.5rem;
		top: 0.8rem;
		position: absolute;
		right: 0.4rem;

		/* #ifdef MP-WEIXIN */
		top: 5rem;
		/* #endif */
	}

	.account-style {
		margin: 0.5rem 0.3rem;
	}

	.nav-container {
		width: 90%;
		box-sizing: border-box;
		padding: 0.8rem 0.3rem 0;
		// background-color: #fff;
		margin: 0 auto;
	}

	.nav-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.nav-item {
		width: 15%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding: 10rpx 0;
		z-index: 2;
	}

	.nav-icon {
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 8rpx;
	}

	.nav-text {
		font-size: 20rpx;
		color: #333;
		line-height: 1;
	}

	.active {
		.nav-text {
			color: #FF4A6A;
			font-weight: 500;
		}

		.nav-icon {
			transform: scale(1.1);
			transition: transform 0.3s ease;
		}
	}

	.slider {
		position: absolute;
		width: 15%;
		height: 125%;
		background: #EEC3C6;
		border-radius: 16rpx;
		top: 0%;
		transform: translateY(-50%);
		z-index: 1;
		transition: transform 0.3s ease;
	}
	.badge-style{
		position: absolute;
		right: 0.2rem;
		top: 2.8rem;
		width: 0.69rem;
		height: 0.69rem;
		line-height: 0.75rem;
		background-color: rgba(248,184,78,1);
		color: rgba(16,16,16,1);
		font-size: 0.5rem;
		text-align: center;
		border: 0.06rem solid rgba(187,187,187,1);
		border-radius: 50%;
	}

	.content-area {
		height: calc(100vh - 12rem);
		padding: 1.3rem 0.5rem;
	}
	
	.bottom-box{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 4.13rem;
		background-color: rgba(255,255,255,1);
	}
</style>